<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../dtree/dtree.css" media="all">
  <link rel="stylesheet" href="../dtree/font/iconfont.css" media="all">
  <style>

</style>
</head>
<body>

  <ul id="demoTree1" class="dtree" data-id="0"></ul>



  <script src="../layui/layui.js"></script>
  <script>
   var data=[
   {
    "title": "上级菜单",
    "spread": true,
    id:123,
    "isLast": false,
        "checkArr": [{"type": "0", "isChecked": "0"}],
    "children": [
    {
      "title": "管理员",
      "level": "2",
      "checkArr": [{"type": "0", "isChecked": "0"}],
      "isLast":false,
       "children": [
       {
      "title": "普通用户",
      "level": "3",
      "checkArr": [{"type": "0", "isChecked": "0"}],
      "isLast":true,
      id:16
    }],
      id:12
    },
    {
      "title": "普通用户",
      "level": "2",
      "checkArr": [{"type": "0", "isChecked": "0"}],
      "isLast":true,
      id:13
    },
    {
      "title": "高级管理员",
      "level": "2",
      "checkArr": [{"type": "0", "isChecked": "0"}],
      "isLast":true,
      id:14
    }
    ]
  }];

  layui.config({
  base: '../dtree/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
  dtree: 'dtree' //定义该组件模块名
}).use(['element','layer', 'dtree'], function(){
  var layer = layui.layer;
  var dtree = layui.dtree;
  var  $ = layui.$;
  
  dtree.render({
      elem: "#demoTree1",  //绑定元素
      //url: "../demoTree1.json"  //异步接口
      initLevel:1,
      data:data,
      checkbar:true
    });

        //单击节点 监听事件
        dtree.on("node('demoTree1')" ,function(param){
          console.log(param)
        });
      });

    </script>

  </body>
  </html>